<template>
  <view class="container screen-width">
    <view class="content" v-if="cardList.length && cardList.length>0">
      <view
        class="casr-list flex items-middle space-between"
        :class="item.privacyStatus===1?'active':''"
        v-for="(item,index) in cardList"
        :key="index"
      >
        <view class="left" @click="toEditCard(item)">
          <view class="top flex items-middle">
            <view class="photo">
              <img :src="$imgUrl + item.avatar" v-if="item.avatar" />
              <img src="/static/userCard/editCard.png" v-else />
            </view>
            <view class="info">
              <view class="flex items-middle flex-wrap">
                <view class="com-name">{{ item.companyName }}</view>
                <view class="per-name">{{ item.name }}</view>
              </view>
              <view class="per-intro">{{ item.synopsis || '简介暂未填写' }}</view>
            </view>
          </view>
          <view class="base-info flex items-middle">
            <view class="item">
              <img src="../../static/userCard/phone.png" />
              <text>{{ item.phoneNumber || '暂未填写'}}</text>
            </view>
            <view class="item">
              <img src="../../static/userCard/envelope.png" />
              <text>{{ item.email || '暂未填写' }}</text>
            </view>
          </view>
          <view class="base-info">
            <img src="../../static/userCard/location.png" />
            <text>{{ item.companyAddress || '暂未填写' }}</text>
          </view>
        </view>
        <image @click="toEditCard(item)" class="arrow" src="../../static/company/goPage.png" />
        <view class="permission" @click="toPermission(item)">...</view>
        <view class="code flex">
          <img
            @click="onDelete(item)"
            style="margin-right:20rpx"
            src="../../static/userCard/delete.png"
          />
          <img @click="generateImage(item)" src="../../static/userCard/erweima_icon.png" />
        </view>
      </view>
      <van-divider v-show="cardList.length && total < total + 1">我也是有底线的</van-divider>
    </view>
    <view style="width:100%;padding:50px;text-align:center" v-else>您暂未添加名片，请前往添加</view>
    <view class="bottom-btn screen-width" @click="toCreateCard">添加名片</view>
    <Festival></Festival>
  </view>
</template>
<script>
import {
  queryMyBusinessCard,
  deleteBusinessCard
} from "../../util/api/userCard";
import { imgUrl } from "@/util/api.js";
export default {
  data() {
    return {
      params: {
        pageNo: 1,
        pageSize: 10
      },
      total: 0,
      cardList: []
    };
  },
  onShow() {
    this.getCardList();
  },
  onReachBottom() {
    if (this.cardList.length >= this.total) return;
    this.params.pageNo += 1;
    this.getCardList();
  },
  methods: {
    // 获取我的名片列表
    async getCardList() {
      const data = await queryMyBusinessCard(this.params);
      this.cardList = data.result.records;
      this.total = data.result.total;
    },
    // 设置名片权限页
    toPermission(item) {
      uni.navigateTo({
        url: `/pages/person/CardPermission?id=${item.id}&privacyStatus=${item.privacyStatus}&cardTopStatus=${item.cardTopStatus}`
      });
    },
    // 去创建名片
    toCreateCard() {
      uni.navigateTo({
        url: "/pages/person/editCard?isEdit=" + 0
      });
    },
    // 编辑名片
    toEditCard(item) {
      uni.navigateTo({
        url: "/pages/person/editCard?id=" + item.id + "&isEdit=" + 1
      });
    },
    // 点击生成名片二维码
    generateImage(item) {
      uni.navigateTo({
        url: "/pages/person/card_QR-code?id=" + item.id
      });
    },
    // 删除名片
    onDelete(item) {
      uni.showModal({
        title: "提示",
        content: "确认删除?",
        cancelText: "取消", // 取消按钮的文字
        confirmText: "确认", // 确认按钮文字
        confirmColor: "#1678ff",
        success: res => {
          if (res.confirm) {
            deleteBusinessCard({
              id: item.id
            }).then(res => {
              if (res.code === 200) {
                uni.showToast({
                  title: "操作成功",
                  duration: 2000,
                  icon: "none"
                });
                setTimeout(() => {
                  this.getCardList();
                }, 1000);
              } else {
                uni.showToast({
                  title: res.message,
                  duration: 2000,
                  icon: "none"
                });
              }
            });
          }
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.container {
  //    height: 100vh;
  //    background: #ffffff;
  .content {
    padding: 10px 15px;
    box-sizing: border-box;
  }
  .casr-list {
    width: 100%;
    height: 200px;
    padding: 10px 15px;
    box-sizing: border-box;
    background-size: 100% 100%;
    background-image: url(../../static/userCard/card_bg.png);
    position: relative;
    margin-top: 10px;
    .top {
      // height: 70%;
      .photo {
        min-width: 60px;
        min-height: 60px;
        border-radius: 50%;
        // background: #1f7dff;
        margin-right: 10px;
        img {
          width: 60px;
          height: 60px;
          border-radius: 50%;
        }
      }
      .com-name {
        color: #1f7dff;
        font-size: 16px;
        margin-right: 5px;
      }
      .per-name {
        color: #6e6e6f;
        font-size: 14px;
      }
      .per-intro {
        color: #aaaaaa;
        font-size: 12px;
        margin-top: 10px;
      }
    }
    .base-info {
      margin-top: 10px;
      .item {
        margin-right: 10px;
      }
      img {
        margin-right: 10px;
        width: 9px;
        height: 11px;
      }
      text {
        color: #333333;
        font-size: 12px;
      }
    }
    .arrow {
      width: 9px;
      height: 15px;
    }
    .permission {
      font-size: 20px;
      font-weight: 700;
      color: #1786ff;
      position: absolute;
      right: 15px;
      top: 10upx;
    }
    .code {
      // width: 30px;
      // height: 30px;
      position: absolute;
      right: 15px;
      bottom: 40upx;
    }
  }
  .active {
    background-image: none;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
  }
  .bottom-btn {
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 25upx 0;
    text-align: center;
    background: #1678ff;
    color: white;
    font-size: 16px;
  }
}
</style>